<template>
    <div class="person">
        <h2>本章没有样式，是讲解typescript的</h2>
    </div>
</template>

<!-- 使用typescript定义一个对象标准，然后在vue中引用这个标准 -->
<script lang="ts" setup name="Person">
    
    // @符号表示重定位到根目录
    // 由于types目录下是index.ts，默认引用，所以这里没有指定
    // 使用 type xxx 引入定义的类型
    import {type Person, type Persons} from '../types'

    // 使用:Person指定定义对象的类型，被指定后，不允许错误和未知的属性定义和缺失的属性
    let person: Person = {id: '123465', name: '张三', age: 18}

    // 使用index.ts中定义的数组类型
    let persons: Persons = [
        {id: '123465', name: '张三', age: 18},
        {id: '123466', name: '李四', age: 19},
        {id: '123467', name: '王五', age: 20, address: '山东省济南市'}
    ]

    // 对定义的类型进行二次包装
    let persons1: Array<Person> = [
        {id: '123465', name: '张三', age: 18},
        {id: '123466', name: '李四', age: 19},
        {id: '123467', name: '王五', age: 20}
    ]

    import {reactive} from 'vue'
    let persons2 = reactive<Persons>([ // 声明响应式对象时，可以在对应的方法上指定泛型，而不是限定返回值类型
        {id: '123465', name: '张三', age: 18},
        {id: '123466', name: '李四', age: 19},
        {id: '123467', name: '王五', age: 20, address: '山东省济南市'}
    ])
</script>

<!-- 这里的scoped标签用于限定当前文件的style样式只会作用于当前文件，不会作用于其他文件 -->
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>